@layout("/common/_container.html"){
    <style>
        .searchbox{
            margin: 10px;
        }
        .addmenu{
            margin-left: 20px;
        }
        .tables{
            margin: 10px;
        }
        .step{
            height: 30px;
            background-color: #EBF7FD;
            padding-left: 10px;
            color: #000;
            line-height: 30px;
            margin-bottom: 20px;
        }
        .iconbox{
            margin-bottom: 15px;
        }
        .icon{
            color: #6DB0FB;
            font-size: 18px;
            margin-right: 10px;
        }
        .labelself{
            display: flex;
            align-items: center;
            justify-content: left;
        }
        .item-del{
            display: flex;
            justify-content: right;
        }
        /* 到期标红 */
        .red{
            color: red;
        }
        /* 递增明细列表 */
        .detailbox{
            display: flex;
        }
        .detail-name{
            margin-right: 5px;
        }
        .pages{
            position: fixed;
            bottom: 10px;
            width: 100%;
            margin-top: 10px;
        }
        /* 分页 */
        .el-pagination.is-background .el-pager li:not(.disabled).active{
            background-color:#10b1c6 !important;
            color: #fff !important;
        }
        .el-select-dropdown__item.selected{
            color:#10b1c6 !important;
        }
        
        /* 分页 */
        .el-table__empty-block{
            text-align:left !important;
        }
        .innerinput{
            -webkit-appearance: none;
            background-color: #FFF;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #DCDFE6;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 32px;
            line-height: 32px;
            outline: 0;
            padding: 0 15px;
            -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            width: 100%;
        }
        .hideone{
            overflow:hidden; 
 
        text-overflow:ellipsis;
        
        white-space:nowrap;
        }
        .hideall{
            width: 200px;
            height: 25px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            word-break: break-all;
        }
        .popper{
            max-height: 300px;
            overflow-y: scroll;
        }
        .infull{
            width: 100%;
        }
        .label-mag{
            margin-left: 20px;
        }
        .datebox{
            display: flex;
            align-items: center;
            width: 100%;
        }
        .rangetxt{
            padding: 0 5px;
        }
        .line{
            width: 100%;
            height: 1px;
            background-color: #f1f1f1;
        }
        .el-dialog__body{
            padding:15px 20px !important;
        }
        .el-dialog__header{
            padding:20px 20px 0 !important;
        }
        .dialog-class{
            height: 650px;
            overflow-y: scroll;
            padding: 0 20px;
        }
        /* formitem间距 */
        .el-form-item{
            margin-bottom:6px !important;
        }
        .el-radio{
            margin-right:5px !important;
        }
        .el-cascader-menu{
            min-width:100px !important;
        }
        .inline{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .el-divider--horizontal{
            margin: 10px 0 13px 0 !important;
        }
        .btybtn{
            background-color: #10b1c6 !important;
            border: none !important;
        }
        .statebox{
            margin-left: 25px;
        }
        /* 营业中 */
        .open{
            width: 10px;
            height: 10px;
            background-color: green;
            border-radius: 50%;
        }
        /* 已闭店 */
        .close{
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%;
        }
    </style>
    </head>
    
    <body>
        <script src="/assets/common/module/vuejs/vue.dev.js"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="/assets/common/module/element-ui/lib-master/theme-chalk/index.css">
        <link rel="stylesheet" href="/assets/common/module/element-ui/lib-master/theme-chalk/display.css">
        <!-- 引入组件库 -->
        <script src="/assets/common/module/element-ui/lib-master/index.js"></script>
    
        <div id="app">
            <div class="searchbox">
                <el-form :inline="true" :model="form" class="demo-form-inline" label-width="100px" label-position="left">
                    <el-form-item :style="formItemStyle" label="一级区域:">
                        <el-select v-model="form.primaryAreaId"
                         size="small"
                         style="width: 220px;"
                         filterable placeholder="请选择一级区域" 
                         v-on:change="provinceChange">
                            <el-option v-for="item in provinceData"
                             :key="item.pid" 
                             :label="item.simpleName" 
                             :value="item.pid">
                                {{item.simpleName}}
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :style="formItemStyle" label="二级区域:">
                        <el-select v-model="form.secondaryArea" 
                        size="small" filterable 
                        style="width: 220px;"
                        placeholder="请选择二级区域">
                            <el-option v-for="item in cityData" :key="item.pid" :label="item.simpleName" :value="item.simpleName">
                                {{item.simpleName}}
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :style="formItemStyle" label="门店/财务码:">
                        <el-popover
                            placement="bottom"
                            title="已选内容"
                            width="200"
                            trigger="hover">
                            <div>
                                <p v-for="(child,cindex) in form.dm" :key="cindex">{{child}}</p>
                            </div>
                            <div slot="reference">
                                <el-select 
                                    v-model="form.dm"
                                    style="width: 220px;"
                                    size="small"
                                    multiple clearable collapse-tags filterable 
                                    placeholder="请输入门店或财务码查询">
                                        <el-option v-for="item in storeData" :key="item.id" :label="item.dm+'-'+item.cwm"
                                        :value="item.dm">
                                        </el-option>
                                </el-select>
                            </div>
                        </el-popover>
                    </el-form-item>
                    <el-form-item :style="formItemStyle" label="合同是否收回:"> 
                        <el-select v-model="form.state" size="small" style="width: 220px;" placeholder="请选择">
                            <el-option v-for="item in takeStatusData" :key="item.value" :label="item.name"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :style="formItemStyle" label="开发人员:">
                        <el-select v-model="form.developer" style="width: 220px;" filterable size="small" placeholder="请选择">
                            <el-option v-for="(item,index) in peopleData" :key="index" :label="item.developer"
                                :value="item.developer">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :style="formItemStyle" label="到期时间:">
                        <el-date-picker
                            v-model="form.endTime"
                            type="daterange"
                            size="small"
                            style="width: 220px;"
                            range-separator="至"
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item :style="formItemStyle" label="缴纳周期:">
                        <el-select v-model="form.rentPaymentCycle" style="width: 220px;" size="small" placeholder="请选择">
                            <el-option v-for="(item,index) in paymentData" :key="index" :label="item.name"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :style="formItemStyle" label="抽成租金:">
                        <el-select v-model="form.rentBonus" style="width: 220px;" filterable size="small">
                            <el-option v-for="(item,index) in rentData" :key="index" :label="item.name"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :style="formItemStyle" label="是否营业:"> 
                        <el-select v-model="form.openState" style="width: 220px;" size="small" placeholder="请选择">
                            <el-option v-for="item in openStateData" :key="item.value" :label="item.name"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :style="formItemStyle"> 
                        <el-button type="primary" size="small" class="btybtn" v-on:click="searchDo()">查询</el-button>
                        <el-button size="small" v-on:click="resetDo">重置</el-button>
                    </el-form-item>
                    <el-form-item :style="formItemStyle">
                        
                        <el-button type="primary" size="small" class="btybtn" v-on:click="searchDo(1)">查询将要到期合同</el-button>
                        <span class="addmenu"></span>
                        <el-button type="primary" size="small" class="btybtn" v-if="isOperate" v-on:click="addContract">新增</el-button>
                        <el-upload
                            v-if="isOperate"
                            class="upload-demo"
                            action=""
                            :show-file-list="false"
                            style="display:inline;"
                            :http-request="uploadFile">
                            <el-button type="primary" size="small" class="btybtn">导入</el-button>
                        </el-upload>
                        <el-button type="primary" size="small" class="btybtn" v-on:click="exportEx">导出</el-button>
                    </el-form-item>
                </el-form>
            </div>
    
            <div class="tables">
                <el-table
                 :data="tableData" 
                 size="small" 
                 ref="singleTable"
                 highlight-current-row 
                 border
                 :height="tableHeight" 
                 :cell-style="{fontSize:'14px'}"
                 :header-cell-style="headerStyle"
                 size="small">
                    <el-table-column prop="" label="序号" align="center" width="60" fixed="left">
                        <template scope="scope">
                            <span>{{(pageIndex - 1) * pagesize + scope.$index + 1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="primaryArea" label="一级区域">
                    </el-table-column>
                    <el-table-column prop="secondaryArea" label="二级区域">
                    </el-table-column>
                    <el-table-column prop="cwm" label="财务码">
                    </el-table-column>
                    <el-table-column prop="yaoma" label="妖码">
                    </el-table-column>
                    <el-table-column prop="dm" label="门店" width="180">
                        <template scope="scope">
                        <el-popover
                            placement="top"
                            popper-class="popper"
                            width="300"
                            trigger="hover">
                            <div>
                                {{scope.row.dm}}
                            </div>
                            <div class="hideone" slot="reference">
                                {{scope.row.dm}}
                            </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column  label="合同是否回收" width="120">
                        <template scope="scope">
                            <el-select
                             v-model="scope.row.state" 
                             :disabled="!isEdit"
                             size="small"
                             placeholder="请选择" 
                             v-on:change="(val)=>innerChange(val,scope.row.id,'state')">
                                <el-option v-for="(item,index) in takeStatusDataAdd" :key="index" :label="item.name"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="contractRemarks" label="合同备注" width="100">
                        <template scope="scope">
                            <el-popover
                                placement="top"
                                v-if="scope.row.contractRemarks"
                                popper-class="popper"
                                width="300"
                                trigger="hover">
                                <div>
                                    {{scope.row.contractRemarks}}
                                </div>
                                <div class="hideone" slot="reference">
                                    {{scope.row.contractRemarks}}
                                </div>
                                </el-popover>
                            </template>
                    </el-table-column>
                    <el-table-column prop="contractRemarks" align="center" label="是否营业" width="80">
                        <template scope="scope">
                            <div class="statebox">
                                <div class="open" v-if="scope.row.openState==1"></div>
                                <div class="close" v-else></div>
                            </div>
                            <!-- {{scope.row.openState==1?'营业中':'已闭店'}} -->
                        </template>
                    </el-table-column>
                    <el-table-column prop="firstParty" label="甲方" width="120">
                        <template scope="scope">
                        <el-popover
                            placement="top"
                            v-if="scope.row.firstParty"
                            popper-class="popper"
                            width="300"
                            trigger="hover">
                            <div>
                                {{scope.row.firstParty}}
                            </div>
                            <div class="hideone" slot="reference">
                                {{scope.row.firstParty}}
                            </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="secondParty" label="乙方" width="120">
                        <template scope="scope">
                        <el-popover
                            placement="top"
                            popper-class="popper"
                            v-if="scope.row.secondParty"
                            width="300"
                            trigger="hover">
                            <div>
                                {{scope.row.secondParty}}
                            </div>
                            <div class="hideone" slot="reference">
                                {{scope.row.secondParty}}
                            </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="developer" label="开发">
                    </el-table-column>
                    <el-table-column prop="phone" label="电话" width="110"></el-table-column>
                    <el-table-column prop="openDate" label="开业时间" width="100">
                    </el-table-column>
                    <el-table-column prop="area" label="面积m²" width="75">
                    </el-table-column>
                    <el-table-column prop="startTime" label="起租时间" width="100">
                    </el-table-column>
                    <el-table-column prop="endTime" label="到期时间" width="100">
                        <template scope="scope">
                            <span :class="scope.row.days <= 180?'red':''">{{scope.row.endTime}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="firstMonthlyRent" width="120" label="首期月租金(元)">
                    </el-table-column>
                    <el-table-column prop="firstMonthlyPropertyFee" width="120" label="首期月物业费(元)">
                    </el-table-column>
                    <el-table-column label="租金缴纳周期" width="130">
                        <template scope="scope">
                            <el-select
                             v-model="scope.row.rentPaymentCycle" 
                             size="small"
                             :disabled="!isOperate"
                             placeholder="请选择" 
                             v-on:change="(val)=>innerChange(val,scope.row.id,'rentPaymentCycle')">
                                <el-option v-for="(item,index) in paymentDataAdd" :key="index" :label="item.name"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="rentPaymentRemark" width="130" label="缴纳周期备注">
                        <template scope="scope">
                            <el-popover
                            v-if="scope.row.rentPaymentRemark"
                            placement="top"
                            popper-class="popper"
                            width="300"
                            trigger="hover">
                                <div>{{scope.row.rentPaymentRemark}}</div>
                                <div class="hideone" slot="reference">
                                    <div>{{scope.row.rentPaymentRemark}}</div>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column  label="递增明细" width="250">
                        <template scope="scope">
                            <el-popover
                            placement="top"
                            popper-class="popper"
                            width="300"
                            trigger="hover">
                            <div>
                                <div v-for="item in scope.row.detailList" class="detailbox">
                                    <div class="detail-name">{{getStateName(item.expenseName,'chargeName',item.otherExpensesName)}}</div>
                                    <div>
                                        <div>{{getStateName(item.detailDate,'detailDate')}}</div>
                                        <div v-if="item.billingMethod == 1 && item.dailyAverageAmount">{{item.dailyAverageAmount}}/日/平</div>
                                        <div v-if="item.billingMethod == 2 && item.monthlyAverageAmount">{{item.monthlyAverageAmount}}/月/平</div>
                                        <div v-if="item.totalAmount">总金额：{{item.totalAmount}}元</div>
                                        <div v-if="item.monthlyAmount">月金额：{{item.monthlyAmount}}元</div>
                                    </div>
                                </div>
                                <div>{{scope.row.detailRemark}}</div>
                            </div>
                            <div class="hideall" slot="reference">
                                <div v-for="item in scope.row.detailList" class="detailbox">
                                    <div class="detail-name">{{getStateName(item.expenseName,'chargeName',item.otherExpensesName)}}</div>
                                    <div>
                                        <div>{{getStateName(item.detailDate,'detailDate')}}</div>
                                        <div v-if="item.billingMethod == 1 && item.dailyAverageAmount">{{item.dailyAverageAmount}}/日/平</div>
                                        <div v-if="item.billingMethod == 2 && item.monthlyAverageAmount">{{item.monthlyAverageAmount}}/月/平</div>
                                        <div v-if="item.totalAmount">总金额：{{item.totalAmount}}元</div>
                                        <div v-if="item.monthlyAmount">月金额：{{item.monthlyAmount}}元</div>
                                    </div>
                                </div>
                                <div>{{scope.row.detailRemark}}</div>
                            </div>
                            </el-popover>
                            
                        </template>
                    </el-table-column>
                    <el-table-column  label="抽成租金" width="250">
                        <template scope="scope">
                            <el-popover
                            placement="top"
                            popper-class="popper"
                            width="300"
                            trigger="hover">
                            <div>
                                <div v-for="item in scope.row.otherDetailList">
                                    <p v-if="item.type == 1 && item.title">{{item.title.replace('|','~')}} , 月营业额{{item.content}}%</p>
                                </div>
                                <div>{{scope.row.rentRemark}}</div>
                            </div>
                            <div class="hideall" slot="reference">
                                <div v-for="item in scope.row.otherDetailList">
                                    <p v-if="item.type == 1 && item.title">{{item.title.replace('|','~')}} , 月营业额{{item.content}}%</p>
                                </div>
                                <div>{{scope.row.rentRemark}}</div>
                            </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column  label="其他费用" width="250">
                        <template scope="scope">
                            <el-popover
                            placement="top"
                            popper-class="popper"
                            width="300"
                            trigger="hover">
                            <div>
                                <div v-for="item in scope.row.otherDetailList">
                                    <p v-if="item.type == 2 && item.title">{{item.title}} : {{item.content}}元</p>
                                </div>
                                <div>{{scope.row.costRemark}}</div>
                            </div>
                            <div class="hideall" slot="reference">
                                <div v-for="item in scope.row.otherDetailList">
                                    <p v-if="item.type == 2 && item.title">{{item.title}} : {{item.content}}元</p>
                                </div>
                                <div>{{scope.row.costRemark}}</div>
                            </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column  label="保证金" width="250">
                        <template scope="scope">
                            <el-popover
                            placement="top"
                            popper-class="popper"
                            width="300"
                            trigger="hover">
                            <div>
                                <div v-for="item in scope.row.otherDetailList">
                                    <p v-if="item.type == 3 && item.title">{{item.title}} : {{item.content}}元</p>
                                </div>
                                <div>{{scope.row.bondRemark}}</div>
                            </div>
                            <div class="hideall" slot="reference">
                                <div v-for="item in scope.row.otherDetailList">
                                    <p v-if="item.type == 3 && item.title">{{item.title}} : {{item.content}}元</p>
                                </div>
                                <div>{{scope.row.bondRemark}}</div>
                            </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" width="200">
                        <template scope="scope">
                            <el-popover
                            v-if="scope.row.remark"
                            placement="top"
                            popper-class="popper"
                            width="300"
                            trigger="hover">
                                <div>{{scope.row.remark}}</div>
                                <div class="hideone" slot="reference">
                                    <div>{{scope.row.remark}}</div>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="performanceStatus" width="150" align="center" label="操作" fixed="right" v-if="isOperate">
                        <template slot-scope="scope">
                            <el-button type="primary" size="small" class="btybtn" v-on:click="editData(scope.row.id)">编辑</el-button>
                            <el-button type="danger" size="small" v-on:click="deleteData(scope.row.id,scope.row.dm)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pages">
                    <el-pagination
                     background 
                     :total="total" 
                     :page-size="pagesize" 
                     v-on:size-change="handleSizeChange"
                     v-on:current-change="handleCurrentChange"
                     :current-page="pageIndex"
                     :page-sizes="[20, 30, 50, 100]"
                     layout="total, sizes, prev, pager, next, jumper">
                    </el-pagination>
                </div>
            </div>
            <el-dialog title="合同信息" :lock-scroll="false" width="950px" custom-class="dialog-class"  v-model="dialogVisible"   :visible.sync="dialogVisible" width="60%" :close-on-click-modal="false" >
                <div class="line"></div>
                <el-tabs v-model="tabType" v-on:tab-click="tabChange">
                    <el-tab-pane label="基本信息" name="first">
                        <div v-if="tabType == 'first'">
                        <el-form :model="baseForm" label-position="left" ref="baseform" :rules="baseRules">
                        <el-form-item>
                            <el-row :gutter="24">
                                <el-col :span="12" >
                                <el-form-item label="门店" :label-width="labelWidth" prop="dm">
                                    <el-select v-model="baseForm.dm"
                                    clearable filterable class="infull" size="small"
                                     placeholder="请选择门店">
                                        <el-option v-for="item in storeData" :key="item.id" :label="item.dm"
                                        :value="item.dm">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                </el-col>
                                <el-col :span="12" >
                                <el-form-item  :label-width="labelWidth" prop="state">
                                    <template #label><div class="label-mag">合同是否收回</div></template>
                                    <el-select v-model="baseForm.state"
                                     class="infull" :disabled="!isEdit"
                                     placeholder="请选择合同是否收回" size="small">
                                        <el-option v-for="item in takeStatusDataAdd" :key="item.value" :label="item.name"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item>
                            <el-row :gutter="24">
                                <el-col :span="12" >
                                <el-form-item label="合同备注" :label-width="labelWidth">
                                    <input class="innerinput infull" v-model.lazy="baseForm.contractRemarks" :disabled="!isEdit" autocomplete="off" />
                                </el-form-item>
                                <div :span="1"></div>
                                </el-col>
                                <el-col :span="12" >
                                <el-form-item label="" :label-width="labelWidth" prop="openState">
                                    <template #label><div class="label-mag">是否营业</div></template>
                                    <el-select size="small" v-model="baseForm.openState" class="infull" placeholder="请选择是否营业">
                                        <el-option v-for="item in openStateDataAdd" :key="item.value" :label="item.name"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item>
                            <el-row :gutter="24">
                                <el-col :span="12" >
                                <el-form-item label="甲方" :label-width="labelWidth" prop="firstParty">
                                    <input class="innerinput infull" v-model.lazy="baseForm.firstParty" autocomplete="off" />
                                </el-form-item>
                                <div :span="1"></div>
                                </el-col>
                                <el-col :span="12" >
                                <el-form-item label="" :label-width="labelWidth" prop="secondParty">
                                    <template #label><div class="label-mag">乙方</div></template>
                                    <input class="innerinput infull" v-model.lazy="baseForm.secondParty" autocomplete="off" />
                                </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item>
                            <el-row :gutter="24">
                                <el-col :span="12" >
                                <el-form-item label="开发人员" :label-width="labelWidth" prop="developer">
                                    <input class="innerinput infull" v-model.lazy="baseForm.developer" autocomplete="off" />
                                </el-form-item>
                                <div :span="1"></div>
                                </el-col>
                                <el-col :span="12" >
                                <el-form-item label="" :label-width="labelWidth" prop="openDate">
                                    <template #label><div class="label-mag">开业时间</div></template>
                                    <el-cascader
                                    class="infull"
                                    v-model="baseForm.openDate"
                                    :options="dateOption"></el-cascader>
                                </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item>
                            <el-row :gutter="24">
                                <el-col :span="12" >
                                <el-form-item label="面积m²" :label-width="labelWidth" prop="area">
                                    <input class="innerinput infull" type="number" v-model.lazy="baseForm.area" autocomplete="off" />
                                </el-form-item>
                                <div :span="1"></div>
                                </el-col>
                                <el-col :span="12" >
                                    <el-form-item label="" :label-width="labelWidth" prop="startTime">
                                        <template #label><div class="label-mag">起租时间</div></template>
                                        <el-cascader
                                        class="infull"
                                        v-model="baseForm.startTime"
                                        :options="dateOption"></el-cascader>
                                </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item>
                            <el-row :gutter="24">
                                <el-col :span="12" >
                                <el-form-item label="到期时间" :label-width="labelWidth" prop="endTime">
                                    <el-cascader
                                        class="infull"
                                        v-model="baseForm.endTime"
                                        :options="dateOption"></el-cascader>
                                </el-form-item>
                                </el-col>
                                <el-col :span="12" >
                                <el-form-item label="" :label-width="labelWidth" prop="firstMonthlyRent">
                                    <template #label><div class="label-mag">首期月租金</div></template>
                                    <input class="innerinput infull" v-model.lazy="baseForm.firstMonthlyRent" autocomplete="off" />
                                </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item>
                            <el-row :gutter="24">
                                <el-col :span="12" >
                                <el-form-item label="首期月物业费" :label-width="labelWidth" prop="firstMonthlyPropertyFee">
                                    <input class="innerinput infull" v-model.lazy="baseForm.firstMonthlyPropertyFee" autocomplete="off" />
                                </el-form-item>
                                <div :span="1"></div>
                                </el-col>
                                <el-col :span="12" >
                                <el-form-item label="" :label-width="labelWidth" prop="rentPaymentCycle">
                                    <template #label><div class="label-mag">租金缴纳周期</div></template>
                                    <el-select size="small" v-model="baseForm.rentPaymentCycle" 
                                    class="infull" placeholder="请选择租金缴纳周期">
                                        <el-option v-for="(item,index) in paymentDataAdd" :key="index" :label="item.name"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="缴纳周期备注" :label-width="labelWidth" prop="rentPaymentRemark">
                            <el-input
                                type="textarea"
                                :rows="2"
                                style="width: 100%;"
                                placeholder="请输入内容"
                                style="width: 100%;"
                                v-model.lazy="baseForm.rentPaymentRemark">
                            </el-input>
                        </el-form-item>
                        </el-form>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="租金明细" name="second">
                        <div v-if="tabType == 'second'">
                        <el-form :model="rentForm" label-position="left">
                            <div class="step">1.递增明细</div>
                            <div v-for="(childitem,childindex) in step1Child" :key="childitem.key">
                                <el-form-item>
                                    <el-row :gutter="24">
                                        <el-col :span="24" >
                                        <el-form-item label="计费方式" :label-width="labelWidth">
                                            <el-select
                                                v-model="childitem.billingMethod" size="small"
                                                v-on:change="(val)=>billMethodChange(val,childindex)"
                                                class="infull">
                                                <el-option v-for="(item,index) in chargeTypeOption"
                                                    :key="childindex+index"
                                                    :label="item.name"
                                                    :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form-item>
                                
                                <el-form-item>
                                    <el-row :gutter="24" >
                                        <el-col :span="12">
                                            <el-form-item label="费用名称" :label-width="labelWidth">
                                            <el-radio-group v-model="childitem.expenseName" style="width: 100%;">
                                                <el-radio
                                                 v-for="(item,index) in chargeNameOption"
                                                :key="childindex+index"
                                                :label="item.value">{{item.name}}</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                        <el-form-item label-width="90px">
                                            <template #label><div class="label-mag">其它</div></template>
                                            <input 
                                                class="innerinput infull"
                                                v-model="childitem.otherExpensesName"
                                                placeholder="请输入其它费用名称"
                                                autocomplete="off" />
                                        </el-form-item>
                                    </el-col>
                                    </el-row>
                                </el-form-item>
                                <el-form-item
                                 v-if="childitem.billingMethod == 1">
                                    <el-row :gutter="24"  type="flex" justify="space-between">
                                        <el-col :span="12">
                                        <el-form-item label="房租金额" :label-width="labelWidth">
                                                <el-input class="infull"
                                                size="small"
                                                v-model.lazy="childitem.dailyAverageAmount"
                                                type="number"
                                                v-on:change="(val)=>calculateTotal(val,childindex,'dailyAverageAmount')" 
                                                autocomplete="off">
                                                    <template slot="suffix">/日/平</template>
                                                </el-input>
                                        </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                        <el-form-item label-width="90px">
                                            <template #label><div class="label-mag">月金额</div></template>
                                            <input class="innerinput"
                                                v-model.lazy="childitem.dailyAverageAmount"
                                                type="number"
                                                v-on:change="(val)=>calculateTotal(val,childindex,'dailyAverageAmount')" 
                                                autocomplete="off" />
                                        </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form-item>
                                <el-form-item
                                 v-if="childitem.billingMethod == 2">
                                    <el-row :gutter="24"  type="flex" justify="space-between">
                                        <el-col :span="12">
                                        <el-form-item label="物业费金额" :label-width="labelWidth">
                                                <el-input class="infull"
                                                size="small"
                                                v-model.lazy="childitem.monthlyAverageAmount" 
                                                type="number"
                                                v-on:change="(val)=>calculateTotal(val,childindex,'monthlyAverageAmount')"
                                                autocomplete="off">
                                                    <template slot="suffix">/月/平</template>
                                                </el-input>
                                        </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                        <el-form-item label-width="90px">
                                            <template #label><div class="label-mag">月金额</div></template>
                                            <input class="innerinput" type="number" v-model.lazy="childitem.monthlyAmount" autocomplete="off" />
                                        </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form-item>

                                <el-form-item>
                                    <el-row :gutter="24">
                                        <el-col :span="12" >
                                        <el-form-item label="日期" :label-width="labelWidth">
                                            <el-cascader
                                            class="infull" size="small"
                                            v-if="childitem.billingMethod == 2"
                                            v-model="childitem.detailDate"
                                            v-on:change="(val)=>calculateTotal(val,childindex,'detailDate')" 
                                            :options="monthOption"></el-cascader>
                                            <el-cascader
                                            class="infull" size="small"
                                            v-if="childitem.billingMethod != 2"
                                            v-model="childitem.detailDate"
                                            v-on:change="(val)=>calculateTotal(val,childindex,'detailDate')" 
                                            :options="dateOption"></el-cascader>
                                        </el-form-item>
                                        </el-col>
                                        <el-col :span="12" >
                                        <el-form-item label-width="90px">
                                            <template #label><div class="label-mag">至</div></template>
                                            <el-cascader
                                            class="infull" size="small"
                                            v-if="childitem.billingMethod == 2"
                                            v-model="childitem.detailDate1"
                                            v-on:change="(val)=>calculateTotal(val,childindex,'detailDate')" 
                                            :options="monthOption"></el-cascader>
                                            <el-cascader
                                            class="infull" size="small"
                                            v-if="childitem.billingMethod != 2"
                                            v-model="childitem.detailDate1"
                                            v-on:change="(val)=>calculateTotal(val,childindex,'detailDate')" 
                                            :options="dateOption"></el-cascader>
                                        </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form-item>
                                <el-form-item
                                 label="总金额" 
                                 v-if="childitem.billingMethod == 1 || childitem.billingMethod == 2" 
                                 :label-width="labelWidth">
                                    <!-- <el-row :gutter="24">
                                        <el-col :span="22">
                                            <div>{{childitem.totalAmount}}</div>
                                        </el-col>
                                        <el-col :span="24">
                                            <div>{{childitem.totalAmount}}</div>
                                        </el-col>
                                    </el-row> -->
                                    <div class="inline">
                                        <div>{{childitem.totalAmount}}</div>
                                        <div v-if="childindex != 0 && childitem.billingMethod != 3" class="item-del">
                                            <el-button type="danger" size="small" v-on:click="delChild('step1',childindex)">删除</el-button>
                                        </div>
                                    </div>
                                </el-form-item>
                                <el-form-item
                                 v-if="childitem.billingMethod == 3">
                                    <el-row :gutter="24">
                                        <el-col :span="12">
                                        <el-form-item label="总金额" :label-width="labelWidth">
                                            <input class="innerinput"
                                            v-model.lazy="childitem.totalAmount" 
                                            type="number"
                                            v-on:change="(val)=>calculateTotal(val,childindex,'totalAmount')" 
                                            autocomplete="off" />
                                        </el-form-item>
                                        </el-col>
                                        <el-col :span="12">
                                        <el-form-item label="月金额" label-width="90px">
                                            <input class="innerinput" v-model.lazy="childitem.monthlyAmount"
                                             type="number"
                                             autocomplete="off" />
                                        </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form-item>
                                <div v-if="childindex != 0 && childitem.billingMethod == 3" class="item-del">
                                    <el-button type="danger" size="small" v-on:click="delChild('step1',childindex)">删除</el-button>
                                </div>
                                <el-divider></el-divider>
                            </div>
                            
                            <div class="iconbox"><i class="el-icon-circle-plus-outline icon" v-on:click="addStep('step1')"></i></div>
                            <el-form-item label="备注" :label-width="labelWidth">
                                <el-input
                                    type="textarea"
                                    :rows="2"
                                    placeholder="请输入内容"
                                    style="width: 100%;"
                                    v-model="rentForm.detailRemark">
                                </el-input>
                            </el-form-item>
                            <div class="step">2.抽成租金</div>
                            <div v-for="(step2item,childindex) in step2Child" :key="step2item.key">
                                
                                <el-form-item>
                                    <!-- <template #label>
                                        <div class="labelself">
                                            <span style="margin-left: 30px;">日期</span>
                                        </div>
                                    </template> -->
                                    <el-row :gutter="24">
                                        <el-col :span="12" >
                                        <el-form-item  :label-width="labelWidth">
                                            <template #label>
                                                <div class="labelself">
                                                    <span >日期</span>
                                                </div>
                                            </template>
                                            <el-cascader
                                            class="infull" size="small"
                                            v-model="step2item.rentDate"
                                            :options="dateOption"></el-cascader>
                                        </el-form-item>
                                        </el-col>
                                        <el-col :span="12" >
                                        <el-form-item label-width="90px">
                                            <template #label><div class="label-mag">至</div></template>
                                            <el-cascader
                                            class="infull" size="small"
                                            v-model="step2item.rentDate1"
                                            :options="dateOption"></el-cascader>
                                        </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form-item>
                                <el-form-item  :label-width="labelWidth">
                                    <template #label>
                                        <div class="labelself">
                                            <i class="el-icon-circle-plus-outline icon" v-on:click="addStep('step2')"></i>
                                            <span>租金</span>
                                        </div>
                                    </template>
                                            <input class="innerinput infull" v-model.lazy="step2item.rentBonus" autocomplete="off" />
                                </el-form-item>
                                <div v-if="childindex != 0" class="item-del">
                                    <el-button type="danger"
                                     size="small" 
                                     v-on:click="delChild('step2',childindex)">删除</el-button>
                                </div>
                                <el-divider></el-divider>
                            </div>

                            <el-form-item label="备注" :label-width="labelWidth">
                                <el-input
                                    type="textarea"
                                    :rows="2"
                                    placeholder="请输入内容"
                                    style="width: 100%;"
                                    v-model="rentForm.rentRemark">
                                </el-input>
                            </el-form-item>
                            <div class="step">3.其它费用</div>
                            <div v-for="(step3item,childindex) in step3Child" :key="step3item.key">
                                
                                <el-form-item>
                                    <el-row :gutter="24">
                                    <el-col :span="12" >
                                    <el-form-item  :label-width="labelWidth">
                                        <template #label>
                                            <div class="labelself">
                                                <i class="el-icon-circle-plus-outline icon" v-on:click="addStep('step3')"></i>
                                                <span>费用名称</span>
                                            </div>
                                        </template>
                                        <input class="innerinput infull" v-model.lazy="step3item.otherExpensesName" autocomplete="off" />
                                    </el-form-item>
                                    </el-col>
                                    <el-col :span="12" >
                                    <el-form-item label-width="90px">
                                        <template #label><div class="label-mag">金额(元)</div></template>
                                        <input class="innerinput infull" v-model.lazy="step3item.otherExpensesAmount" autocomplete="off" />
                                    </el-form-item>
                                    </el-col>
                                    </el-row>
                                </el-form-item>
                                <div v-if="childindex != 0" class="item-del">
                                    <el-button type="danger"
                                     size="small" 
                                     v-on:click="delChild('step3',childindex)">删除</el-button>
                                </div>
                                <el-divider></el-divider>
                            </div>
                            <el-form-item label="备注" :label-width="labelWidth">
                                        <el-input
                                            type="textarea"
                                            :rows="2"
                                            placeholder="请输入内容"
                                            style="width: 100%;"
                                            v-model="rentForm.costRemark">
                                        </el-input>
                            </el-form-item>
                            <div class="step">4.保证金</div>
                            <div v-for="(step4item,childindex) in step4Child" :key="step4item.key">
                                
                                <el-form-item >
                                    <el-row :gutter="24">
                                    <el-col :span="12" >
                                    <el-form-item  :label-width="labelWidth">
                                        <template #label>
                                            <div class="labelself">
                                                <i class="el-icon-circle-plus-outline icon" v-on:click="addStep('step4')"></i>
                                                <span>保证金名称</span>
                                            </div>
                                        </template>
                                        <input class="innerinput infull" v-model.lazy="step4item.bondName" autocomplete="off" />
                                    </el-form-item>
                                    </el-col>
                                    <el-col :span="12" >
                                    <el-form-item label-width="90px">
                                        <template #label><div class="label-mag">金额(元)</div></template>
                                        <input class="innerinput infull" v-model.lazy="step4item.bondAmount" autocomplete="off" />
                                    </el-form-item>
                                    </el-col>
                                    </el-row>
                                </el-form-item>
                                <div v-if="childindex != 0" class="item-del">
                                    <el-button type="danger"
                                     size="small" 
                                     v-on:click="delChild('step4',childindex)">删除</el-button>
                                </div>
                                <el-divider></el-divider>
                            </div>
                            <el-form-item label="备注" :label-width="labelWidth">
                                        <el-input
                                            type="textarea"
                                            :rows="2"
                                            placeholder="请输入内容"
                                            style="width: 100%;"
                                            v-model="rentForm.bondRemark">
                                        </el-input>
                            </el-form-item>
                            <div class="step">5.备注</div>
                            <el-form-item label="备注" :label-width="labelWidth">
                                        <el-input
                                            type="textarea"
                                            :rows="2"
                                            style="width: 100%;"
                                            placeholder="请输入内容"
                                            v-model="rentForm.remark">
                                        </el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    </el-tab-pane>
                </el-tabs>
                <div slot="footer" class="dialog-footer">
                    <el-button v-on:click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" v-on:click="saveContract">保 存</el-button>
                </div>
            </el-dialog>
        </div>
    
        <script>
            
            var app = new Vue({
                el: '#app',
                data: {
                    formItemStyle: {
                        marginBottom: 0,
                    },
                    tableData: [],
                    pageIndex: 1,//当前页码
                    pagesize: 20,//每页数量
                    total: 0,//总条数
                    dialogVisible: false,//添加编辑框是否显示
                    loading: false,//表格是否加载
                    sending:false,//请求是否进行中
                    isEdit:false,//是否可以编辑合同备注，合同是否收回 只有丁飞可编辑
                    isOperate:false,//是否可以操作编辑添加按钮 成本会计和管理员可以操作
                    form: {
                        primaryArea:'',//一级区域
                        primaryAreaId:'',//一级区域id
                        secondaryArea:'',//二级区域
                        dm:'',//财务码
                        state:'',//合同是否收回
                        developer:'全部',//开发人员
                        endTime:'',//到期时间
                        rentPaymentCycle:'',//缴纳周期
                        rentBonus:'',//抽成租金
                        overtime:0,//是否查询即将到期合同 1为查询
                        openState:'',//是否营业
                    },
                    takeStatusData:[
                        {name:'全部',value:''},
                        {name:'空',value:7},
                        {name:'已收回',value:1},
                        {name:'未收回',value:2},
                        {name:'复印件',value:3},
                        {name:'电子版',value:4},
                        {name:'无',value:5},
                        {name:'合同不全',value:6},
                    ],//合同是否收回选项数据
                    takeStatusDataAdd:[
                        {name:'已收回',value:1},
                        {name:'未收回',value:2},
                        {name:'复印件',value:3},
                        {name:'电子版',value:4},
                        {name:'无',value:5},
                        {name:'合同不全',value:6},
                    ],//合同是否收回选项数据
                    paymentData:[
                        {name:'全部',value:''},
                        {name:'月付',value:1},
                        {name:'俩月付',value:2},
                        {name:'季付',value:3},
                        {name:'半年付',value:4},
                        {name:'年付',value:5},
                    ],//缴纳周期选项数据
                    paymentDataAdd:[
                        {name:'月付',value:1},
                        {name:'俩月付',value:2},
                        {name:'季付',value:3},
                        {name:'半年付',value:4},
                        {name:'年付',value:5},
                    ],//缴纳周期选项数据
                    rentData:[
                        {name:'全部',value:''},
                        {name:'有',value:1},
                        {name:'无',value:2},
                    ],//抽成租金选项数据
                    storeData: [],//门店数据
                    tabType:'first',//添加编辑时选中的tab
                    baseForm:{
                        state:'',//合同是否收回
                        dm:'',//店名
                        contractRemarks:'',//合同备注
                        openState:1,//是否营业
                        firstParty:'',//甲方
                        secondParty:'',//乙方
                        developer:'',//开发人员
                        openDate:[],//开业时间
                        area:'',//面积
                        startTime:[],//起租时间
                        endTime:[],//到期时间
                        firstMonthlyRent:'',//首期月租金
                        firstMonthlyPropertyFee:'',//首期月物业费
                        rentPaymentCycle:'',//租金缴纳周期
                        rentPaymentRemark:'',//租金缴纳周期备注
                    },//添加编辑的form表单
                    rentForm:{
                        remark:'',//备注
                        detailRemark:'',//递增明细备注
                        rentRemark:'',//抽成租金备注
                        costRemark:'',//其他费用备注
                        bondRemark:'',//保证金备注
                    },//租金明细form表单
                    chargeTypeOption:[
                        {
                            name: '每日每平',
                            value: 1
                        },
                        {
                            name: '每月每平',
                            value: 2
                        },
                        {
                            name: '固定计费',
                            value: 3
                        },
                    ],//计费方式下拉框数据
                    chargeNameOption:[
                        {
                            name: '房租',
                            value: 1
                        },
                        {
                            name: '物业费',
                            value: 2
                        },
                        {
                            name: '运营管理费',
                            value: 3
                        },
                        {
                            name: '推广费',
                            value: 4
                        },
                        {
                            name: '其它',
                            value: 5
                        },
                    ],//费用名称选项
                    openStateData:[
                        {
                            name: '全部',
                            value: ''
                        },
                        {
                            name: '营业中',
                            value: 1
                        },
                        {
                            name: '已闭店',
                            value: 2
                        },
                    ],//营业选项数据
                    openStateDataAdd:[
                        {
                            name: '营业中',
                            value: 1
                        },
                        {
                            name: '已闭店',
                            value: 2
                        },
                    ],//营业选项数据
                    labelWidth:'120px',//label宽度
                    provinceData:[],//一级区域的数据
                    cityData:[],//二级区域数据
                    peopleData:[],//开发人员数据
                    baseRules: {
                        dm: [
                            { required: true, message: '请选择门店', trigger: 'change' },
                        ],
                    },
                    step1Child:[
                        {
                            key:random(1,10000),
                            billingMethod:1,//计费方式
                            expenseName:'',//费用名称
                            otherExpensesName:'',//费用名称其他文字输入
                            dailyAverageAmount:'',//每日每平金额
                            monthlyAverageAmount:'',//每月每平金额
                            monthlyAmount:'',//月金额
                            detailDate:[],//日期
                            detailDate1:[],//到期日期
                            totalAmount:'',//总金额
                        }
                    ],//递增明细列表项数量
                    step2Child:[
                        {
                            key:random(1,10000),
                            rentDate:[],//日期
                            rentDate1:[],//日期
                            rentBonus:'',//抽成
                        }
                    ],//抽成租金列表项数量
                    step3Child:[
                        {
                            key:random(1,10000),
                            otherExpensesName:'',//名称
                            otherExpensesAmount:'',//金额
                        }
                    ],//其他费用列表项数量
                    step4Child:[
                        {
                            key:random(1,10000),
                            bondName:'',//名称
                            bondAmount:'',//金额
                        }
                    ],//保证金列表项数量
                    tableHeight:0,
                    dateOption:[],//日期选项
                    monthOption:[],//月份选项
                    headerStyle:{color:'#0E2231',fontWeight:'blod',background:'#F7F5FA'}
                },
                created() {
                    let height = window.screen.availHeight - 400
                    this.tableHeight = height
                    this.getListData()
                    this.getProvince()//获取一级区域数据
                    this.getPeople()//获取开发人员数据
                    this.getStores()//获取门店数据
                    this.getPower()//获取是否有编辑权限
                    this.getYears()//获取年日期选择数据
                },
                methods: {
                    getYears(){
                        let start = 2013
                        let years = []
                        let yearsNo = []
                        let months = this.getMonth(1)
                        let monthsNo = this.getMonth(2)
                        
                        for (let index = 0; index < 50; index++) {
                            years[index] = {
                                label:(start+index)+'',
                                value:(start+index)+'',
                                children:months
                            }
                            yearsNo[index] = {
                                label:(start+index)+'',
                                value:(start+index)+'',
                                children:monthsNo
                            }
                        }
                        setTimeout(() => {
                            this.dateOption = years
                            this.monthOption = yearsNo
                        }, 0);
                    },
                    // type =1包括日期 =2不包括日期
                    getMonth(type){
                        let month = []
                        let days = []
                        for (let index = 0; index < 31; index++) {
                            let label = (index+1)+''
                            days[index] = {
                                label:label.length==1?('0'+label):(label+''),
                                value:label.length==1?('0'+label):(label+''),
                            }
                        }
                        for (let index = 0; index < 12; index++) {
                            let label = (index+1)+''
                            if(type == 1){
                                month[index] = {
                                    label:label.length==1?('0'+label):(label+''),
                                    value:label.length==1?('0'+label):(label+''),
                                    children:days
                                }
                            }else{
                                month[index] = {
                                    label:label.length==1?('0'+label):(label+''),
                                    value:label.length==1?('0'+label):(label+''),
                                }
                            }
                        }
                        return month
                    },

                    // 获取一级区域的数据
                    getProvince(){
                        let formData = new FormData()
                        const requestOptions = {
                            method: "POST",
                            body: formData
                        };
                        fetch("/btyContract/primaryAreaList", requestOptions)
                            .then(response => response.json())
                            .then(res => {
                                this.provinceData = res
                            })
                    },
                    // 获取二级区域数据
                    getCity(pid){
                        let formData = new FormData()
                        formData.append("pid",pid)
                        const requestOptions = {
                            method: "POST",
                            body: formData
                        };
                        fetch("/btyContract/secondaryAreaList", requestOptions)
                            .then(response => response.json())
                            .then(res => {
                                this.cityData = res
                            })
                    },
                    // 获取开发人员数据
                    getPeople(){
                        let formData = new FormData()
                        const requestOptions = {
                            method: "POST",
                            body: formData
                        };
                        fetch("/btyContract/kfryList", requestOptions)
                            .then(response => response.json())
                            .then(res => {
                                this.peopleData = [{developer:'全部'},...res]
                            })
                    },
                    // 获取是否拥有编辑权限
                    getPower(){
                        let formData = new FormData()
                        const requestOptions = {
                            method: "POST",
                            body: formData
                        };
                        fetch("/btyContract/readonlyList", requestOptions)
                            .then(response => response.json())
                            .then(res => {
                                this.isEdit = res.readonly==2?true:false
                                this.isOperate = (res.cbkjFlag==2 || res. cjglFlag==2)?true:false
                            })
                    },
                    // 编辑数据
                    editData(id){
                        this.dialogVisible = true
                        this.resetFormData()
                        this.tabType = "first"
                        let formData = new FormData()
                        formData.append("id", id)
                        const requestOptions = {
                            method: "POST",
                            body: formData
                        };
                        fetch("/btyContract/detail", requestOptions)
                            .then(response => response.json())
                            .then(res => {
                                if (res.code === 200) {
                                    this.mergeEditData(res.data)
                                }
                            })
                    },
                    // 删除数据
                    deleteData(id,name){
                        this.$confirm('是否确认删除'+name+'的合同？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                            }).then(() => {
                                let formData = new FormData()
                                formData.append("id", id)
                                const requestOptions = {
                                    method: "POST",
                                    body: formData
                                };
                                fetch("/btyContract/delete", requestOptions)
                                    .then(response => response.json())
                                    .then(res => {
                                        if (res.code === 200) {
                                            this.$message({
                                                type: 'success',
                                                message: '删除成功!'
                                            });
                                            this.getListData()
                                        }else{
                                            this.$message({
                                                type: 'error',
                                                message: res.message
                                            });
                                        }
                                    })
                                
                            }).catch(() => {});
                    },
                    // 编辑回显数据
                    mergeEditData(row){
                        let step1Child = [], step2Child = [],step3Child = [],step4Child = [];
                        this.baseForm = {
                            ...row,
                            openDate:row.openDate?row.openDate.split('-'):[],
                            startTime:row.startTime?row.startTime.split('-'):[],
                            endTime:row.endTime?row.endTime.split('-'):[],
                        }
                        this.rentForm = {
                            id:row.id,
                            detailRemark:row.detailRemark,
                            remark:row.remark,
                            rentRemark:row.rentRemark,
                            costRemark:row.costRemark,
                            bondRemark:row.bondRemark,
                        }
                        row.otherDetailList.map(item=>{
                            if(item.type == 1){
                                let date1 = [];
                                let date2 = [];
                                if(item.title){
                                    let arr = item.title.split('|')
                                    date1 = arr[0]
                                    date2 = arr[1]
                                }
                                //抽成租金
                                step2Child.push({
                                    key:item.id,
                                    rentDate:date1.split(','),//日期
                                    rentDate1:date2.split(','),//日期
                                    rentBonus:item.content,//抽成
                                })
                            }else if(item.type == 2){
                                //其他费用
                                step3Child.push({
                                    key:item.id,
                                    otherExpensesName:item.title,//名称
                                    otherExpensesAmount:item.content,//金额
                                })
                            }else{
                                //保证金
                                step4Child.push({
                                    key:item.id,
                                    bondName:item.title,//名称
                                    bondAmount:item.content,//金额
                                })
                            }
                        })
                        row.detailList.map(item=>{
                            let date1 = []
                            let date2 = []

                            if(item.detailDate){
                                let arr = JSON.parse(item.detailDate)
                                date1 = arr[0]
                                date2 = arr[1]
                            }
                            step1Child.push({
                                ...item,
                                key:item.id,
                                detailDate:date1,
                                detailDate1:date2,
                                expenseName:parseInt(item.expenseName)
                            })
                        })
                        if(step1Child.length) this.step1Child = step1Child
                        if(step2Child.length) this.step2Child = step2Child
                        if(step3Child.length) this.step3Child = step3Child
                        if(step4Child.length) this.step4Child = step4Child
                    },
                    // 搜索内容 overtime是否要查询即将到期合同
                    searchDo(overtime=0) {
                        this.form.overtime = overtime
                        this.pageIndex = 1
                        this.getListData()
                    },
                    // 获取列表数据
                    getListData() {
                        this.loading = true
                        let form = this.form
                        let { pageIndex, pagesize } = this
                        let keys = Object.keys(form)
                        let formData = new FormData()
                        keys.map(item=>{
                            if(item == "dm" && form[item]){
                                formData.append(item, form[item].join(','))
                            }else if(item == "endTime" && form[item]){
                                formData.append(item, form[item].join('|'))
                            }else if(item == "developer" && form[item]){
                                formData.append(item, form[item]=='全部'?'':form[item])
                            }else{
                                formData.append(item, form[item])
                            }
                        })
                        formData.append("page", pageIndex)
                        formData.append("limit", pagesize)
                        const requestOptions = {
                            method: "POST",
                            body: formData
                        };
                        fetch("/btyContract/list", requestOptions)
                            .then(response => response.json())
                            .then(res => {
                                if (res.code === 0) {
                                    this.total = res.count
                                    this.tableData = res.data
                                    this.loading = false
                                    setTimeout(() => {
                                        this.$nextTick(() => {
                                            this.$refs.singleTable.doLayout(); // 解决表格错位
                                        });
                                    }, 100);

                                    
                                } else {
                                    this.loading = false
                                }
                            })
                    },
                    // 重置搜索条件
                    resetDo() {
                        this.form = {
                            primaryArea:'',//一级区域
                            primaryAreaId:'',//一级区域id
                            secondaryArea:'',//二级区域
                            dm:'',//财务码
                            state:'',//合同是否收回
                            developer:'全部',//开发人员
                            endTime:'',//到期时间
                            rentPaymentCycle:'',//缴纳周期
                            rentBonus:'',//抽成租金
                            overtime:0,
                            openState:''
                        }
                        this.pageIndex = 1
                        setTimeout(() => {
                            this.getListData()
                        }, 0);
                    },
                    // 页码改变
                    handleSizeChange(val) {
                        this.pagesize = val
                        this.getListData()
                    },
                    handleCurrentChange(val){
                        this.pageIndex = val
                        this.getListData()
                    },
                    exportEx() {
                        this.$message({
                            message: '正在导出中,请稍后',
                            type: 'info',
                            duration:5000
                        });
                        let data = this.form
                        let keys = Object.keys(data)
                        let str = "/btyContract/export?"
                        keys.map((item,index)=>{
                            if(index == 0){
                                str += item+'='+data[item]
                            }else{
                                str +=  "&"+item+'='+data[item]
                            }
                        })
                        window.location.href = str
                    },
                    
                    // 获取门店数据
                    getStores() {
                        let formData = new FormData()
                        const requestOptions = {
                            method: "POST",
                            body: formData
                        };
                        fetch("/btyContract/dmList", requestOptions)
                            .then(response => response.json())
                            .then(res => {
                                this.storeData = res
                            })
                    },
                    // tab改变
                    tabChange(val){
                        // 存在基本信息id切换时给租金明细表单id赋值  目的是防止添加时添加两条记录
                        if(val.index == "1" && this.baseForm.id){
                            this.rentForm.id = this.baseForm.id
                        }
                    },
                    // 一级区域改变
                    provinceChange(val){
                        let data = this.provinceData.find(item=>{
                            return item.pid == val
                        })
                        this.form.primaryArea = data.simpleName
                        this.getCity(val)
                    },
                    // 添加合同
                    addContract(){
                        this.dialogVisible = true
                        this.tabType = "first"
                        this.resetFormData()
                    },
                    // 重置表单数据信息
                    resetFormData(){
                        this.baseForm = {
                            id:'',
                            state:'',//合同是否收回
                            dm:'',//店名
                            contractRemarks:'',//合同备注
                            openState:1,//是否营业
                            firstParty:'',//甲方
                            secondParty:'',//乙方
                            developer:'',//开发人员
                            openDate:[],//开业时间
                            area:'',//面积
                            startTime:[],//起租时间
                            endTime:[],//到期时间
                            firstMonthlyRent:'',//首期月租金
                            firstMonthlyPropertyFee:'',//首期月物业费
                            rentPaymentCycle:'',//租金缴纳周期
                            rentPaymentRemark:'',//缴纳周期备注
                        }
                        this.rentForm = {
                            id:'',
                            remark:'',//备注
                            detailRemark:'',//递增明细备注
                            rentRemark:'',
                            costRemark:'',
                            bondRemark:'',
                        }
                        this.step1Child = [
                            {
                                key:random(1,10000),
                                billingMethod:1,//计费方式
                                expenseName:'',//费用名称
                                otherExpensesName:'',//费用名称其他文字输入
                                dailyAverageAmount:'',//每日每平金额
                                monthlyAverageAmount:'',//每月每平金额
                                monthlyAmount:'',//月金额
                                detailDate:[],//日期
                                detailDate1:[],//日期
                                totalAmount:'',//总金额
                            }
                        ]
                        this.step2Child = [
                            {
                                key:random(1,10000),
                                rentDate:[],//日期
                                rentDate1:[],//日期
                                rentBonus:'',//抽成
                            }
                        ]
                        this.step3Child = [
                            {
                                key:random(1,10000),
                                otherExpensesName:'',//名称
                                otherExpensesAmount:'',//金额
                            }
                        ]
                        this.step4Child = [
                            {
                                key:random(1,10000),
                                bondName:'',//名称
                                bondAmount:'',//金额
                            }
                        ]
                    },
                    // 保存添加合同信息
                    saveContract(){
                        const {tabType} = this
                        if(tabType == "first"){
                            this.$refs['baseform'].validate((valid) => {
                                if (valid) {
                                    let data = JSON.parse(JSON.stringify(this.baseForm))
                                    data.openDate = data.openDate.length?data.openDate.join('-'):''
                                    data.startTime = data.startTime.length?data.startTime.join('-'):''
                                    data.endTime = data.endTime.length?data.endTime.join('-'):''
                                    const requestOptions = {
                                        method: "POST",
                                        body: JSON.stringify(data),
                                        headers: {
                                            'Content-Type': 'application/json'
                                        }
                                    };
                                    fetch(data.id?"/btyContract/editItem":"/btyContract/addItem", requestOptions)
                                        .then(response => response.json())
                                        .then(res => {
                                            if(res.code == "200"){
                                                this.$message({
                                                    message: '操作成功',
                                                    type: 'success'
                                                });
                                                //添加时保存合同信息id
                                                if(!data.id){
                                                    this.baseForm.id = res.data
                                                }
                                                this.getListData()
                                            }else{
                                                this.$message({
                                                    message: res.message,
                                                    type: 'error'
                                                });
                                            }
                                        })
                                }else{
                                    this.$message({
                                        message: "请填写门店信息",
                                        type: 'warning'
                                    });
                                }
                            });
                        }else{
                            let canContinue = true
                            let otherDetailList = []
                            let {rentForm,step1Child,step2Child,step3Child,step4Child} = this
                            let step1data = JSON.parse(JSON.stringify(step1Child))
                            for (let index = 0; index < step1data.length; index++) {
                                if((step1data[index].detailDate.length && !step1data[index].detailDate1.length)
                                 || (!step1data[index].detailDate.length && step1data[index].detailDate1.length)){
                                    canContinue = false
                                    break
                                }

                                if(!step1data[index].detailDate.length && !step1data[index].detailDate1.length){
                                    step1data[index].detailDate = ''
                                }else{
                                    step1data[index].detailDate = [step1data[index].detailDate,step1data[index].detailDate1]
                                }
                                step1data[index].contractId = rentForm.id
                            }
                            for (let index = 0; index < step2Child.length; index++) {
                                let datenew = ""
                                if((step2Child[index].rentDate.length && !step2Child[index].rentDate1.length) 
                                || (!step2Child[index].rentDate.length && step2Child[index].rentDate1.length)){
                                    canContinue = false
                                    break
                                }
                                if(!step2Child[index].rentDate.length && !step2Child[index].rentDate1.length){
                                    datenew = ''
                                }else{
                                    datenew = [step2Child[index].rentDate,step2Child[index].rentDate1]
                                }
                                otherDetailList.push({
                                    type:1,
                                    contractId:rentForm.id,
                                    title:datenew?datenew.join('|'):"",
                                    content:step2Child[index].rentBonus
                                })
                            }
                            if(!canContinue){
                                this.$message({
                                    message: "日期范围需填写完整",
                                    type: 'error'
                                });
                                return
                            }
                            step3Child.map(item=>{
                                otherDetailList.push({
                                    type:2,
                                    contractId:rentForm.id,
                                    title:item.otherExpensesName,
                                    content:item.otherExpensesAmount
                                })
                            })
                            step4Child.map(item=>{
                                otherDetailList.push({
                                    type:3,
                                    contractId:rentForm.id,
                                    title:item.bondName,
                                    content:item.bondAmount
                                })
                            })
                            let obj = {
                                ...rentForm,
                                detailList:step1data,
                                otherDetailList
                            }
                            const requestOptions = {
                                method: "POST",
                                body: JSON.stringify(obj),
                                headers: {
                                    'Content-Type': 'application/json'
                                }
                            };
                            fetch(obj.id?"/btyContract/editItem":"/btyContract/addItem", requestOptions)
                                .then(response => response.json())
                                .then(res => {
                                    if(res.code == "200"){
                                        this.$message({
                                            message: '操作成功',
                                            type: 'success'
                                        });
                                        this.getListData()
                                    }else{
                                        this.$message({
                                            message: res.message,
                                            type: 'error'
                                        });
                                    }
                                })

                        }
                        
                    },
                    // 添加递增明细数量
                    addStep(key){
                        switch (key) {
                            case 'step1':
                                this.step1Child.push({
                                    key:random(1,10000),
                                    billingMethod:1,//计费方式
                                    expenseName:'',//费用名称
                                    otherExpensesName:'',//费用名称其他文字输入
                                    dailyAverageAmount:'',//每日每平金额
                                    monthlyAverageAmount:'',//每月每平金额
                                    monthlyAmount:'',//月金额
                                    detailDate:[],//日期
                                    detailDate1:[],//日期
                                    totalAmount:'',//总金额
                                })
                                break;
                            case 'step2':
                                this.step2Child.push({
                                    key:random(1,10000),
                                    rentDate:[],//日期
                                    rentDate1:[],//日期
                                    rentBonus:'',//抽成
                                })
                            break;
                            case 'step3':
                                this.step3Child.push({
                                    key:random(1,10000),
                                    otherExpensesName:'',//名称
                                    otherExpensesAmount:'',//金额
                                })
                            break;
                            case 'step4':
                                this.step4Child.push({
                                    key:random(1,10000),
                                    bondName:'',//名称
                                    bondAmount:'',//金额
                                })
                            break;
                        }
                    },
                    // 删除多项中的某一项
                    delChild(key,index){
                        switch (key) {
                            case 'step1':
                                this.step1Child.splice(index,1)
                                break;
                            case 'step2':
                                this.step2Child.splice(index,1)
                                break;
                            case 'step3':
                                this.step3Child.splice(index,1)
                                break;
                            case 'step4':
                                this.step4Child.splice(index,1)
                                break;
                        }
                    },
                    // 根据数字码获取对应状态名
                    getStateName(val,key,other=''){
                        if(!val){
                            return ""
                        }
                        const {chargeNameOption} = this
                        let name = ''
                        let data;
                        switch (key) {
                            case 'chargeName':
                                if(val == 5){
                                    name = other
                                }else{
                                    data = chargeNameOption.find((item)=>{
                                        return val == item.value
                                    })
                                    name = data?data.name:""
                                }
                                break;
                            case 'detailDate':
                                let arr = JSON.parse(val)
                                name = arr.join("~")
                                break;
                        }
                        return name
                    },
                    // 表格行内选项改变
                    innerChange(val,id,key){
                        let obj = {id}
                        switch (key) {
                            case 'state':
                                obj.state = val
                                break;
                            case 'rentPaymentCycle':
                                obj.rentPaymentCycle = val
                                break;
                        }
                        this.loading = true
                        const requestOptions = {
                            method: "POST",
                            body: JSON.stringify(obj),
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        };
                        fetch("/btyContract/editItem", requestOptions)
                            .then(response => response.json())
                            .then(res => {
                                this.loading = false
                                if(res.code == "200"){
                                    this.$message({
                                        message: '操作成功',
                                        type: 'success'
                                    });
                                }else{
                                    this.$message({
                                        message: res.message,
                                        type: 'error'
                                    });
                                }
                            })
                    },
                    // 计算总金额
                    calculateTotal(val,index,key){
                        let base = this.baseForm
                        let prevent = this.step1Child[index]
                        let {dailyAverageAmount,monthlyAverageAmount,billingMethod,totalAmount} = this.step1Child[index]
                        let dateArr = prevent.detailDate
                        let area = base.area?parseFloat(base.area):1;//面积数
                        let canGo = true
                        let startDate = prevent.detailDate?prevent.detailDate.join('-'):''
                        let endDate = prevent.detailDate1?prevent.detailDate1.join('-'):''
                        if(!startDate || !endDate){
                            return false
                        }
                        let detailDate = [startDate,endDate]
                        // if(key == 'detailDate'){
                        //     if(!dateArr[0] || !dateArr[1] || !dateArr[3] || !dateArr[4]){
                        //         return false
                        //     }
                        // }
                        if(!val){
                            return false
                        }
                        // detailDate = getDate(dateArr,'range')//获取转化后的日期
                        // if(!detailDate){
                        //     return false
                        // }
                        // 缺少未填写的内容总金额设置为0
                        // if(!canGo){
                        //     this.$set(this.step1Child,index,{...prevent,totalAmount:'',monthlyAmount:''})
                        //     return
                        // }
                        //每日每平
                        if(billingMethod == 1){
                            //改房租金额并且一选择日期
                            if(key == 'dailyAverageAmount' && detailDate.length){
                                let days = getDaysBetween(detailDate[0],detailDate[1])
                                let month = dateDiff(detailDate[0],detailDate[1])//获取相差月数
                                let total = (parseFloat(val)*days*area).toFixed(2)
                                let monthMoney = (total/month).toFixed(2);//月金额
                                this.$set(this.step1Child,index,{...prevent,totalAmount:total,monthlyAmount:monthMoney})
                            }else if(key == 'detailDate' && dailyAverageAmount){
                                // 修改日期并且存在房租金额
                                let days = getDaysBetween(detailDate[0],detailDate[1])
                                let month = dateDiff(detailDate[0],detailDate[1])//获取相差月数
                                let total = (parseFloat(dailyAverageAmount)*days*area).toFixed(2)
                                let monthMoney = (total/month).toFixed(2);//月金额
                                this.$set(this.step1Child,index,{...prevent,totalAmount:total,monthlyAmount:monthMoney})
                            }
                        }else if (billingMethod == 2){
                            // 每月每平
                            if(key == 'monthlyAverageAmount' && detailDate.length){
                                let month = dateDiff(detailDate[0],detailDate[1])//获取相差月数
                                let total = (parseFloat(val)*month*area).toFixed(2)
                                let monthMoney = (total/month).toFixed(2);//月金额
                                this.$set(this.step1Child,index,{...prevent,totalAmount:total,monthlyAmount:monthMoney})
                            }else if(key == 'detailDate' && monthlyAverageAmount){
                                // 修改日期并且存在物业费金额
                                let month = dateDiff(detailDate[0],detailDate[1])//获取相差月数
                                let total = (parseFloat(monthlyAverageAmount)*month*area).toFixed(2)
                                let monthMoney = (total/month).toFixed(2);//月金额
                                this.$set(this.step1Child,index,{...prevent,totalAmount:total,monthlyAmount:monthMoney})
                            }
                        }else if (billingMethod == 3){
                            // 固定计费
                            // 修改总金额并且存在日期
                            if(key == 'totalAmount' && detailDate.length){
                                let month = dateDiff(detailDate[0],detailDate[1])//获取相差月数
                                let monthMoney = (val/month).toFixed(2);//月金额
                                this.$set(this.step1Child,index,{...prevent,monthlyAmount:monthMoney})
                            }else if(key == 'detailDate' && totalAmount){
                                // 修改日期并且存在物业费金额
                                let month = dateDiff(detailDate[0],detailDate[1])//获取相差月数
                                let monthMoney = (totalAmount/month).toFixed(2);//月金额
                                this.$set(this.step1Child,index,{...prevent,monthlyAmount:monthMoney})
                            }
                        }
                    },
                    // 计费方式改变清空已输入值
                    billMethodChange(val,index){
                        let data = this.step1Child[index]
                        this.$set(this.step1Child,index,{
                            ...data,
                            dailyAverageAmount:'',
                            monthlyAverageAmount:'',
                            monthlyAmount:'',
                            detailDate:[],
                            detailDate1:[],
                            totalAmount:'',
                        })
                    },

                    // 导入文件
                    uploadFile(file){
                        const {sending} = this
                        if(sending){
                            return
                        }
                        this.sending = true
                        let formData = new FormData()
                        formData.append("file",file.file)
                        const requestOptions = {
                            method: "POST",
                            body: formData
                        };
                        fetch("/btyContract/import", requestOptions)
                            .then(response => response.json())
                            .then(res => {
                                this.sending = false
                                if(res === true){
                                    this.$message({
                                        message: '操作成功',
                                        type: 'success'
                                    });
                                    this.searchDo()//重新请求数据
                                }else{
                                    this.$message.error('导入失败请重试');
                                }
                            })
                            .catch(err=>{
                                this.sending = false
                            })
                        
                    }
                }
            })

            // 检查日期是否输入完整 range 分类 1选择年月日范围 2选择年月范围
            function fullDate(arr,range=1){
                let count = []
                arr.map(item=>{
                    if(item){
                        count.push(item)
                    }
                })
                if(!count.length){
                    return true
                }
                if(range != 2){
                    if(count.length != 6){
                        return false
                    }
                }else{
                    if(count.length != 4){
                        return false
                    }
                }
                return true
            }
            // 根据日期数组获取日期数据 type range范围 date为日期
            function getDate(arr,type){
                if(arr.length==0 || !arr[0] || !arr[1]){
                    return ''
                }
                let date;
                if(type == "date"){
                    date = arr[0]+'-'+(arr[1].length==1?'0'+arr[1]:arr[1])+'-'+(arr[2].length==1?'0'+arr[2]:arr[2])
                }else{
                    let day1 = '';
                    let day2 = '';
                    if(arr[2]){
                        day1 = '-'+(arr[2].length==1?'0'+arr[2]:arr[2])
                    }
                    if(arr[5]){
                        day2 = '-'+(arr[5].length==1?'0'+arr[5]:arr[5])
                    }
                    let date1 = ''+arr[0]+'-'+(arr[1].length==1?'0'+arr[1]:arr[1])+day1;
                    let date2 = ''+arr[3]+'-'+(arr[4].length==1?'0'+arr[4]:arr[4])+day2
                    date = [
                        date1,
                        date2
                    ]
                }
                return date
            }
            // 生成随机数
            function random(lower, upper) {
                return Math.floor(Math.random() * (upper - lower)) + lower;
            }
            // 获取日期相差天数
            function getDaysBetween(startDate, enDate) {
                const sDate = Date.parse(startDate)
                const eDate = Date.parse(enDate)
                if (sDate > eDate) {
                    return 0
                }
                if (sDate === eDate) {
                    return 1
                }
                const days = (eDate - sDate) / (1 * 24 * 60 * 60 * 1000)
                return days
            }
            // 获取日期相差月份
            function dateDiff(startTime,endTime) {
                let flag = [1, 3, 5, 7, 8, 10, 12, 4, 6, 9, 11, 2];
                let start = new Date(startTime);
                let end = new Date(endTime);
                let year = end.getFullYear() - start.getFullYear();
                let month = end.getMonth() - start.getMonth();
                let diff = year * 12 +month
                return diff?diff:1
                // let day = end.getDate() - start.getDate();
                // if (month < 0) {
                //     year--;
                //     month = end.getMonth() + (12 - start.getMonth());
                // }
                // if (day < 0) {
                //     month--;
                //     let index = flag.findIndex((temp) => {
                //     return temp === start.getMonth() + 1
                //     });
                //     let monthLength;
                //     if (index <= 6) {
                //     monthLength = 31;
                //     } else if (index > 6 && index <= 10) {
                //     monthLength = 30;
                //     } else {
                //     monthLength = 28;
                //     }
                //     day = end.getDate() + (monthLength - start.getDate());
                // }
                // return (year*12+month)?(year*12+month):1
            }
        </script>
    </body>
    @}